<template>
  <!--银行流水-->
  <BasicModal :width="1300" v-bind="$attrs"
    :title="getTitle" :canFullscreen="false" :centered="true"
    :destroyOnClose="true" :showCancelBtn="false" :showOkBtn="false"
    :bodyStyle="{height:'500px', overflowY:'hidden'}"
    @register="registerModal"
  >
    <BasicTable @register="registerTable" :onRowClick="handleClick" :onRowDbClick="handleDblclick" :rowClassName="rowClassName" >
      <!--template #tableTitle>
        <a-button type="primary" color="success" @click="handleCreate" :disabled="!model.id" preIcon="ant-design:sisternode-outlined" > 分解 </a-button>
        <a-button type="primary" preIcon="ant-design:edit-outlined" @click="handleEdit" :disabled="editDisabled"> 编辑</a-button>
        <a-button type="primary" color="error" preIcon="ant-design:delete-twotone" @click="handleDelete" :disabled="deleDisabled"> 删除 </a-button>
      </！template-->
    </BasicTable>

    <template #footer>
      <span>银行账号：{{model.djm}}</span>
      <span>记账日期：{{model.jzsj}}</span>
      <span>交易类型：{{model.sflxZW}}</span>
      <span>分解金额：<label class="font-bold">{{model.zje}}</label></span>
      <span>已分解：<label class="font-bold text-red-500">{{model.yfje}}</label></span>
      <span>未分解：<label class="font-bold text-green-500">{{model.wfje}}</label></span>
    </template>
  </BasicModal>
  <!-- 分解新增 -->
  <BankDecomposeModel @register="registerBankDecomposeAdd" @success="modalFormOk" :canResize="true"></BankDecomposeModel>
</template>

<script lang="ts" name="BankBusinessOrder" setup>
  import {ref, computed, unref, reactive, toRaw} from 'vue';
  import {BasicModal, useModalInner, useModal} from '/@/components/Modal';
  import {BasicTable, TableAction, ActionItem, BasicColumn, useTable} from '/@/components/Table';
  import {bankRunningSave, bankDecomposeById, bankDecomposeList, deleteBankRunning} from "/@/views/full/bank/types/bank.api";
  import {useMessage} from "/@/hooks/web/useMessage";
  import {useListPage} from '/@/hooks/system/useListPage';
  import {filterObj} from '/@/utils/common/compUtils';
  import {render} from '/@/utils/common/renderUtils';
  import {replaceAll} from "/@/utils";

  import moment from 'dayjs'
  import BankDecomposeModel from './BankDecomposeModel.vue';

  //----------定义变量 开始-------------------------------------------------------------
  const $message = useMessage();
  // 声明Emits
  const emit = defineEmits(['success', 'register']);
  // 表单modal
  const model = ref<any>({})
  const isUpdate = ref(true);

  // 定义查询 - 查询条件
  const editDisabled = ref<boolean>(true);
  const deleDisabled = ref<boolean>(true);
  const queryParam = reactive<any>({});

  //标题
  const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '分解明细'));

  //未分解金额
  //const uncoupleCal = computed(() => JSON.parse(unref(summaryData)[0]) );
  // ----------定义变量 结束-------------------------------------------------------------

  // ----------初始化组件-开始-------------------------------------------------------------
  // 窗口初始化去取相关的数据
  const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
    setModalProps({confirmLoading: false});
    isUpdate.value = !!data?.isUpdate;
    let id = data?.record.id || ''
    if (isUpdate.value && id) {
      model.value = await bankDecomposeById({id:id});
      queryParam.parentId = model.value.id
      searchQuery();
    }
    console.info(model.value, id)
  });

  // 数据新增窗口
  const [registerBankDecomposeAdd, { openModal: openBankDecomposeModal }] = useModal();

  // ----------初始化组件-结束-------------------------------------------------------------


  // ----------列表数据-开始--------------------------------------------------------------
  const statusFmt = ({ text }: { text: any }) => {
    if (text && text !== '合计') {
      const color = text == '0' ? 'green' : text == '1' ? 'red' : 'green';
      const value = text == '0' ? '未审' : text == '1' ? '已审' : '未审';
      return render.renderTag(value, color);
    }
  };
  // 订单列表 - 表头
  const columns: BasicColumn[] = [
    { title: '状态', align: 'center', dataIndex: 'shbj', width: 56, customRender: statusFmt },
    { title: '部门', align: 'center', dataIndex: 'ddlx', width: 60, customRender: ({ text }) => render.renderDict(text, 'ddlxType') },
    { title: '订单号', align: 'center', dataIndex: 'orderId', width: 80, className: 'text-red-500' },
    { title: '银行账户', align: 'left', dataIndex: 'djm', width: 125 },
    { title: '收入', align: 'right', dataIndex: 'srje', width: 70, className: 'text-red-500' },
    { title: '支出', align: 'right', dataIndex: 'zcje', width: 70, className: 'text-green-500' },
    { title: '备注', align: 'left', dataIndex: 'bz', width: 140 },
    { title: '操作人', align: 'center', dataIndex: 'lrr', width: 50 },
    { title: '操作时间', align: 'center', dataIndex: 'lrsj', width: 100 },
  ];

  // 列表页面公共参数、方法
  const loading = ref<boolean>(false);
  const dataSource = ref<any[]>([]);
  const summaryData = ref<any[]>([]);
  const { prefixCls, tableContext } = useListPage({
    designScope: 'bankDecompose-list',
    tableProps: {
      rowKey: "id",
      size: "small",
      dataSource: dataSource,
      columns: columns,
      showTableSetting: false,
      showIndexColumn: true, //行号
      showActionColumn: false,
      useSearchForm: false,
      resizeHeightOffset: 60,
      minHeight: 300,
      maxHeight: 360,
      pagination: false,
      showSummary: true,
      summaryData: summaryData,
    }
  });

  // 注册table数据
  const [registerTable, { reload, setProps, getRawDataSource, redoHeight }] = tableContext;

  async function loadDecomposeData(id?) {
    if (!id) {
      id = model.value.id
    }
    await bankDecomposeById({id:id}).then(res => {
      model.value = res;
    })
  }

  async function loadRootData() {
    if (!queryParam.parentId) {
      return false;
    }
    loading.value = true;
    await bankDecomposeList(filterObj(queryParam)).then( res => {
      if (res) {
        dataSource.value = res.rows;
        summaryData.value = res.footer;
      } else {
        dataSource.value = [];
        summaryData.value = [];
      }
    }).finally(() => {
      loading.value = false;
    });
    console.info('loadRootData@@@@', summaryData.value)
  }

  //分解组件
  // --------------列表数据-结束----------------------------------------

  // --------------组件--事件----------------------------------------
  //单击行
  let selectRows = reactive<any>({ id: '', username: '' });
  function handleClick(record) {
    selectRows.id = record.id;
    selectRows.username = record.username;
    if (record.shbj == '1') {
      editDisabled.value = true;
      deleDisabled.value = true;
    } else {
      editDisabled.value = false;
      deleDisabled.value = false;
    }
  }

  //双击行
  function handleDblclick(record) {
    if (record.shbj === '0') {
      handleEdit();
    } else {
    }
  }

  function rowClassName(record, index) {
    return record.id === selectRows.id ? 'row-selected' : '';
  }

  /**
   * 新增
   */
  function handleCreate() {
    openBankDecomposeModal(true, { model, isUpdate: false });
  }

  /**
   * 编辑
   */
  function handleEdit() {
    let record = { id: selectRows.id };
    openBankDecomposeModal(true, { model, record, isUpdate: true });
  }

  /**
   * 删除
   */
  async function handleDelete() {
    await deleteBankRunning({ id: selectRows.id }, modalFormOk);
  }

  /**
   * 解分表单提交成功后刷新列表
   */
  function modalFormOk() {
    searchQuery();
    loadDecomposeData();
  }

  /**
   * 查询
   */
  function searchQuery() {
    loadRootData();
  }
  // --------------组件--事件----------------------------------------
</script>

<style lang="less" scoped>
  .ant-modal-footer {
    span:not(:last-child) {
      margin-right: 15px;
    }
  }
</style>
